<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="http://localhost:8080/vue-demo/showAllGoods.html">所有商品</a></el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1"><a href="http://localhost:8080/vue-demo/usersMai.html" >修改个人信息</a></el-menu-item>
            <el-menu-item index="2-2"><a href="http://localhost:8080/vue-demo/showUserGoods.html" >管理商品</a></el-menu-item>
            <el-menu-item index="2-3">与客户聊天</el-menu-item>
            <el-menu-item index="2-4"><a href="http://localhost:8080/vue-demo/showCancelOrder.html" >我的商品售后</a></el-menu-item>
            <el-menu-item index="2-5"><a href="https://www.ele.me">管理收到的订单</a></el-menu-item>

        </el-submenu>
        <el-menu-item index="3" ><a href="http://localhost:8080/vue-demo/manageAddress.html" target="_blank">管理地址</a></el-menu-item>
        <el-menu-item index="4"><a href="http://localhost:8080/vue-demo/showMyGouwucar.html" target="_blank">我的购物车</a></el-menu-item>
        <el-menu-item index="5"><a href="http://localhost:8080/vue-demo/addPrice.html" target="_blank">积分充值</a></el-menu-item>
        <el-submenu index="6">
            <template slot="title">支付订单管理</template>
            <el-menu-item index="6-1"><a href="http://localhost:8080/vue-demo/showAllOrderForm.html" >所有订单</a></el-menu-item>
            <el-menu-item index="6-2"><a href="http://localhost:8080/vue-demo/showFalseOrderForm.html" >未付款订单</a></el-menu-item>
            <el-menu-item index="6-3"><a href="http://localhost:8080/vue-demo/showSuccessOrderForm.html" >已支付订单</a></el-menu-item>
        </el-submenu>
        <el-menu-item index="7" @click="signIn">每日签到</el-menu-item>
        <el-menu-item index="8" @click="dialogVisible11 = true">退出登录</el-menu-item>
    </el-menu>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="退出登录"
            :visible.sync="dialogVisible11"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="goods" label-width="80px">
            <el-form-item>
                <el-button type="primary" @click="cancelLogin">确认要退出登录吗</el-button>
                <el-button @click="dialogVisible11 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--按钮-->
    <el-row>
        <el-button type="primary" plain @click="dialogVisibleThree = true">批量删除</el-button>
        <el-button type="danger" plain  @click="dialogVisible = true">新增</el-button>
    </el-row>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="新增商品"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="goods" label-width="80px" >
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="goods.goodsName" placeholder="请输入商品名称" :maxlength="12"></el-input>
            </el-form-item>
            <template >
                <el-table
                        :data="goods_type"
                        style="width: 100%"

                        :row-class-name="tableRowClassName">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="商品种类"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="选择">
                        <template slot-scope="scope">
                            <!-- 在这里，你可以使用scope.$index来获取当前行的索引值 -->
                            <el-button type="primary" @click="selectType(scope.$index)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!--<el-form-item label="商品类型">
                <el-select v-model="goods.goodsType" placeholder="请选择商品类型">
                    <el-option label="默认" value="默认"></el-option>
                    <el-option label="服饰" value="服饰"></el-option>
                    <el-option label="首饰" value="首饰"></el-option>
                    <el-option label="数码" value="数码"></el-option>
                    <el-option label="文具" value="文具"></el-option>
                </el-select>
            </el-form-item>-->
            <el-form-item label="商品类型" prop="goodsType">
                <el-input  v-model="goods.goodsType" readonly></el-input>
            </el-form-item>
            <el-form-item label="商品信息" prop="goodsMessage">
                <el-input type="textarea" v-model="goods.goodsMessage" placeholder="请输入商品信息" :maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input  type="text" v-model="goods.price" placeholder="价格" onkeyup="value=value.replace(/[^\d^\.]+/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="goodsNum">
                <el-input v-model.number="goods.goodsNum" placeholder="库存"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addgoods">立即创建</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--查询详细数据的对话框表单-->
    <el-dialog
            title="查询详细数据"
            :visible.sync="dialogVisible3"
            width="30%">
        <template>
            <el-table
                    :data="goodsComment"
                    style="width: 100%"

                    :row-class-name="tableRowClassName">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="发布评论时间"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="goodsComment"
                        label="评论"
                        align="center">
                </el-table-column>
            </el-table>
        </template>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="删除商品"
            :visible.sync="dialogVisibleThree"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="goods" label-width="80px" >
            <el-form-item>
                <el-button type="primary" @click="deletegoods">确认删除</el-button>
                <el-button @click="dialogVisibleThree = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="删除商品"
            :visible.sync="dialogVisibleFour"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="goods" label-width="80px" >

            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="goods.goodsName" readonly></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="deleteGoods2(goods.goodsID)">确认删除</el-button>
                <el-button @click="dialogVisibleFour = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="修改商品"
            :visible.sync="dialogVisibleFive"
            width="30%">

        <!--<form action="uploadPicture2" method="post" enctype="multipart/form-data">
            <input type="file" name="file" />
            <input type="submit" value="Upload" />
        </form>-->
        <el-upload
                name="file"
                class="avatar-uploader"
                action="http://localhost:8080/vue-demo/uploadPicture2"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form status-icon :rules="rules" ref="form" :model="goods" label-width="80px" >
            <div class="demo-image">
            <div class="block" v-for="fit in fits" :key="fit">
                <span class="demonstration">{{ fit }}</span>
                <el-image
                        style="width: 100px; height: 100px"
                        :src="goods.url"
                        :fit="fit"></el-image>
            </div>
        </div>
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="goods.goodsName" placeholder="请输入商品名称" :maxlength="12"></el-input>
            </el-form-item>
            <template >
                <el-table
                        :data="goods_type"
                        style="width: 100%"

                        :row-class-name="tableRowClassName">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="商品种类"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="选择">
                        <template slot-scope="scope">
                            <!-- 在这里，你可以使用scope.$index来获取当前行的索引值 -->
                            <el-button type="primary" @click="selectType(scope.$index)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!--<el-form-item label="商品类型">
                <el-select v-model="goods.goodsType" placeholder="请选择商品类型">
                    <el-option label="默认" value="默认"></el-option>
                    <el-option label="服饰" value="服饰"></el-option>
                    <el-option label="首饰" value="首饰"></el-option>
                    <el-option label="数码" value="数码"></el-option>
                    <el-option label="文具" value="文具"></el-option>
                </el-select>
            </el-form-item>-->
            <el-form-item label="商品类型" prop="goodsType">
                <el-input  v-model="goods.goodsType" readonly></el-input>
            </el-form-item>
            <el-form-item label="商品状态">
                <el-select v-model="goods.statue" placeholder="请调整商品状态">
                    <el-option label="上架" value="上架"></el-option>
                    <el-option label="下架" value="下架"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品信息" prop="goodsMessage">
                <el-input type="textarea" v-model="goods.goodsMessage" placeholder="请输入商品信息" :maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input  type="text" v-model="goods.price" placeholder="价格" onkeyup="value=value.replace(/[^\d^\.]+/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="goodsNum">
                <el-input v-model.number="goods.goodsNum" placeholder="库存"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifyGoods2(goods.goodsID)">立即修改</el-button>
                <el-button @click="dialogVisibleFive = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--表格-->
    <template >
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="商品上架日期"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="goodsXiaoLiang"
                    label="销量"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="goodsGreat"
                    align="center"
                    label="好评数">
            </el-table-column>
            <el-table-column
                    prop="goodsName"
                    align="center"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="goodsMessage"
                    align="center"
                    label="商品信息">
            </el-table-column>
            <el-table-column
                    prop="goodsType"
                    align="center"
                    label="商品种类">
            </el-table-column>
            <el-table-column
                    prop="price"
                    align="center"
                    label="商品价格">
            </el-table-column>
            <el-table-column
                    prop="statue"
                    align="center"
                    label="商品状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <!-- 在这里，你可以使用scope.$index来获取当前行的索引值 -->
                    <el-button type="primary" @click="lookComments(scope.$index)">查看评论</el-button>
                    <el-button type="primary" @click="modifyGoods(scope.$index)">修改</el-button>
                    <el-button type="danger" @click="deleteGoods(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el:"#app",

        mounted(){
            //当页面加载完成之后，发布异步请求获取数据

            var _this = this;
           // axios({
             //   method:"get",
            //    url:"http://localhost:8080/vue-demo/userMaiGoods"
           // }).then(function (resp) {
           ///     _this.tableData = resp.data;
           // })

            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/userMaiGoods?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
            }).then(function (resp) {
                _this.tableData = resp.data.rows;
                _this.totalCount = resp.data.totalCount;
            })
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/showAllGoodsType"
            }).then(function (resp) {
                _this.goods_type = resp.data;
            })

        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },//复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection);
            },
            signIn(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/signIn",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("今日签到成功，已为您增加2积分")
                    }
                    else if(resp.data === "error"){
                        alert("今日已签到")
                    }
                })
            },
            addgoods() {
                //console.log(this.goods);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/addGoods",
                    data:_this.goods
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("新增商品成功")
                        _this.dialogVisible =  false
                    }
                })
            },
            modifyGoods2(goodsID) {
                //console.log(goodsID);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyGoods",
                    data:_this.goods
                }).then(function (resp) {
                    //console.log(resp.data)

                    if (resp.data === "success") {
                        alert("修改商品成功")
                        _this.dialogVisibleFive =  false
                    }
                    if(resp.data === "error"){
                        alert("库存为0，不可以上架")
                    }
                })
            },
            selectType(index) {
                //console.log(index);
                //console.log(this.goods_type[index]);
                this.goods.goodsType = this.goods_type[index].type;
            },
            lookComments(index){
                this.goods.goodsID = this.tableData[index].goodsID;
                this.goods.goodsName = this.tableData[index].goodsName;
                //this.goods.goodsType = this.tableData[index].goodsType;
                this.goods.goodsType = "默认";
                this.goods.goodsMessage = this.tableData[index].goodsMessage;
                this.goods.price = this.tableData[index].price;
                this.goods.goodsNum = this.tableData[index].goodsNum;
                this.goods.statue = this.tableData[index].statue;
                //url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
                this.goods.url = this.tableData[index].url
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/lookComments",
                    data:_this.goods
                }).then(function (resp) {
                    _this.goodsComment = resp.data;
                    _this.dialogVisible3 =  true;
                })
            },
            modifyGoods(index) {
                //console.log(index);
                //console.log(this.tableData[index].goodsID);
                this.fileList.goodsID = this.tableData[index].goodsID;
                this.goods.goodsID = this.tableData[index].goodsID;
                this.goods.goodsName = this.tableData[index].goodsName;
                //this.goods.goodsType = this.tableData[index].goodsType;
                this.goods.goodsType = "默认";
                this.goods.goodsMessage = this.tableData[index].goodsMessage;
                this.goods.price = this.tableData[index].price;
                this.goods.goodsNum = this.tableData[index].goodsNum;
                this.goods.statue = this.tableData[index].statue;
                //url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
                this.goods.url = this.tableData[index].url
                //修改session里面的goodsID
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyGoods2",
                    data:_this.goods
                }).then(function (resp) {
                    //console.log(resp.data)

                })
                this.dialogVisibleFive =  true;
            },

            deleteGoods2(goodsID) {
                //console.log(goodsID);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/deleteGoods2",
                    data:goodsID
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("删除商品成功")
                        _this.dialogVisibleFour =  false
                    }
                })
            },
            deleteGoods(index) {
                //console.log(index);
                //console.log(this.tableData[index].goodsID);
                this.goods.goodsID = this.tableData[index].goodsID;
                this.goods.goodsName = this.tableData[index].goodsName;
                this.dialogVisibleFour =  true;
                //var _this = this;
                //发送请求
                //axios({
                  //  method : "post",
                  //  url:"http://localhost:8080/vue-demo/deleteGoods2",
                 //   data:_this.tableData[index].goodsID
               // }).then(function (resp) {

                //    if (resp.data === "success") {
                  //      alert("删除商品成功")
                  //      _this.dialogVisibleFour =  false
                  //  }
              //  })
            },
            cancelLogin(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/cancelLogin",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("您已经退出登录")
                        window.location.href = "http://localhost:8080/vue-demo/hello.html";
                    }
                })
            },
            deletegoods(){
                //console.log(this.multipleSelection);
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let selectionElement =  this.multipleSelection[i];
                    this.selectedIds[i] = selectionElement.goodsID;
                }
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/deleteGoods",
                    data:_this.selectedIds
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("删除商品成功")
                        _this.dialogVisibleThree =  false
                    }
                })

            },
            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.selectAll();
            },
            selectAll(){
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/vue-demo/userMaiGoods?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
                }).then(function (resp) {
                    _this.tableData = resp.data.rows;
                    _this.totalCount = resp.data.totalCount;
                })
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        data() {
            var checkPrice = (rule, value, callback) => {
                value = String(value); // 将value转换为字符串
                if(!(/^\d+(\.\d{1,2})?$/).test(value)){
                    callback(new Error('输入有误'));
                }else {
                    value = parseFloat(value, 10);
                    if(value === 0){
                        callback(new Error('输入有误'));
                    }
                    callback();
                }
            }


            var validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入商品名称'));
                } else {
                    if(/\s/.test(value)){
                        //如果存在空格
                        return callback(new Error('商品名不可以有空格'));
                    }
                    else {
                        callback();
                    }
                    //callback();
                }
            }
            var validateMessage = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入商品信息'));
                } else {
                    if(/\s/.test(value)){
                        //如果存在空格
                        return callback(new Error('商品信息不可以有空格'));
                    }
                    else {
                        callback();
                    }
                    //callback();
                }
            }
            var checkNum = (rule, value, callback) => {
                if (value < 0) {
                    return callback(new Error('库存数目不对劲'));
                }
                else {
                    setTimeout(() => {
                        if (!Number.isInteger(value)) {
                            callback(new Error('必须是整数'));
                        }else {
                            callback();
                        }
                    }, 1000);
                }
            }
            return {
                imageUrl: '',
                fits: [''],
                pageSize:5,
                totalCount:100,
                activeIndex2: '1',
                currentPage: 1,

                fileList: {
                    name: '',
                    url: '',
                    goodsID:'',
                },
                goodsComment: [{
                    userID:'',
                    goodsID:'',
                    goodsComment:'',
                    commentTime:'',
                    date:''
                }],
                //搜索表单数据
                goods: {
                    goodsName: '',
                    goodsType: '默认',
                    goodsDianPu: '',
                    date: '',
                    goodsMessage: '',
                    goodsGreat: '',
                    goodsXiaoLiang: '',
                    goodsNum:'',
                    statue:'',
                    id:'',
                    goodsID:'',
                    price: '',
                    url: '',
                },
                tableData: [{
                    goodsName: '',
                    goodsType: '默认',
                    goodsDianPu: '',
                    date: '',
                    goodsMessage: '',
                    goodsGreat: '',
                    goodsXiaoLiang: '',
                    goodsNum:'',
                    statue:'下架',
                    id:'',
                    goodsID:'',
                    price: '',
                    url:'',
                }],
                goods_type: [{
                    type:'',
                    goods_id:''
                }],
                rules: {
                    goodsNum: [
                        {validator: checkNum, trigger: 'blur'}
                    ],
                    price: [
                        {validator: checkPrice, trigger: 'blur'}
                    ],
                    goodsName:[
                        {validator:validateName, trigger: 'blur' }
                    ],
                    goodsMessage:[
                        {validator:validateMessage, trigger: 'blur' }
                    ],
                },
                //被选中的id数组
                selectedIds:[],

                //复选框选中数据
                multipleSelection: [],

                //展开对话框
                dialogVisible: false,
                dialogVisibleThree:false,
                dialogVisibleFour:false,
                dialogVisibleFive:false,
                dialogVisible11: false,
                dialogImageUrl: '',
                dialogVisible6: false,
                dialogVisible3: false,
            }
        }
    })
</script>

</body>
</html>